  <template>
  <el-row style="height: calc(100% - 10px)">
    <el-col :span="24" style="height: 100%;">
      <div style="flex: 1;display: flex;flex-direction: column;height: 100%;">
        <dv-border-box-2 style="flex: 1;" :color="['#025d6d']">
          <div style="height: 100%;overflow-y: auto;padding: 0px 10px;">
            <el-table fit :data="tableData1" style="width: 100%;margin:0 auto; "
              :header-row-style="{fontSize:'10px',color:'white',fontFamily:'宋体'}"
              :row-style="{fontSize:'13px',color:'white',fontFamily:'宋体'}" border show-summary
              :summary-method="getSummaries">
              <el-table-column prop="compName" label="企业名称" align="left" width="265px">
                <!-- <template slot-scope="scope">
              <div v-if="scope.$index == 0" class="menu_title">房东隐患统计</div>
            </template> -->
              </el-table-column>
              <el-table-column prop="goods1" label="消防水枪" min-width="55px" align="center">
              </el-table-column>
              <el-table-column prop="goods2" label="消防水带" min-width="55px" align="center">
              </el-table-column>
              <el-table-column prop="goods3" label="消火栓扳手" min-width="55px" align="center">
              </el-table-column>
              <el-table-column prop="goods4" label="强光照明灯" min-width="55px" align="center">
              </el-table-column>
              <el-table-column prop="goods5" label="手电筒" min-width="55px" align="center">
              </el-table-column>
              <el-table-column prop="goods6" label="消防斧" min-width="55px" align="center">

              </el-table-column>
              <el-table-column prop="goods7" label="头戴式照明灯" min-width="55px" align="center">
              </el-table-column>
              <el-table-column prop="goods8" label="消防服(套)" min-width="55px" align="center">
              </el-table-column>
              <el-table-column prop="goods9" label="防毒面具" min-width="55px" align="center">
              </el-table-column>
              <el-table-column prop="goods10" label="正压式消防空气呼吸器" min-width="55px" align="center">
              </el-table-column>
              <el-table-column prop="goods11" label="推车式灭火器" min-width="55px" align="center">
              </el-table-column>
              <el-table-column prop="goods12" label="手提式灭火器" min-width="55px" align="center">
              </el-table-column>
              <el-table-column prop="goods13" label="化学防护服" min-width="55px" align="center">
              </el-table-column>
              <el-table-column prop="goods14" label="防化靴" min-width="55px" align="center">
              </el-table-column>
              <el-table-column prop="goods15" label="气体浓度检测仪" min-width="55px" align="center">
              </el-table-column>
              <el-table-column prop="goods16" label="吸附材料或堵漏器材" min-width="55px" align="center">
              </el-table-column>
              <el-table-column prop="goods17" label="担架" min-width="55px" align="center">
              </el-table-column>
              <el-table-column prop="goods18" label="急救箱" min-width="55px" align="center">
              </el-table-column>
              <el-table-column prop="goods19" label="氧气袋" min-width="55px" align="center">
              </el-table-column>

            </el-table>

          </div>
        </dv-border-box-2>
      </div>

    </el-col>

  </el-row>

</template>
  <script>
// import Charts from '@jiaminghi/charts';
import pieOption1 from './charts/pieOption1';
import { tableData1 } from './data';
import pie1 from './charts/pie1';
import pie2 from './charts/pie2';

import CheckMark from '@/components/checkMark';
import { queryEmergGoodsList } from '@/service/emergGoods';
export default {
  components: { CheckMark },
  data() {
    return {
      loading: true,
      tableHeight: 650,
      value: '1',
      tableData1: [],

      option1: {},
    };
  },
  methods: {
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        // 这里添加需要进行合计的列的名称
        const sumColArr = ['金额', '特价'];
        if (column.label != '企业名称') {
          const values = data.map((item) => Number(item[column.property]));
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values
              .reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                  return prev + curr;
                } else {
                  return prev;
                }
              }, 0)
              .toFixed(0); // 固定两位小数
            sums[index] += ''; // 这里可以添加单位 如： sums[index] += '元'
          } else {
            sums[index] = ' ';
          }
        }
      });
      return sums;
    },
    clickItem(compny_name) {
      console.log('compny_name', compny_name);
    },
    async loadTable() {
      const res = await queryEmergGoodsList({});
      if (res.dataList) {
        this.tableData1 = res.dataList;
      }
    },
  },

  mounted() {
    this.loadTable();
    // const vm = this;

    // setTimeout(() => {
    //   vm.loadCharts();
    // }, 500);
  },
};
</script>
<style scoped>
/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td,
::v-deep .el-table th.el-table__cell {
  background-color: transparent;
}

::v-deep .el-table td.el-table__cell,
::v-deep .el-table th.el-table__cell.is-leaf {
  /* border-bottom: 0; */
}

::v-deep.el-table--enable-row-transition .el-table__body td.el-table__cell {
  background-color: transparent !important;
}
::v-deep.el-table td.el-table__cell div.cell {
  background-color: transparent !important;
}
::v-deep .el-table {
  background-color: transparent !important;
}
::v-deep .el-table .el-table__cell {
  padding: 5px 0px;
}

::v-deep .el-table__row {
  background-color: transparent !important;
}

::v-deep .el-table__row {
  background-color: transparent !important;
}

::v-deep .el-table .cell {
  padding-left: 1px;
  padding-right: 1px;
}

::v-deep .el-table th.el-table__cell > .cell {
  padding-left: 1px;
  padding-right: 1px;
}

/* 去除底部白线 */
.el-table::before {
  background-color: transparent;
}

.el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}

.menu_text {
  color: #01ccec;
  font-size: 15px;
}

.border-box-content {
  padding: 10px;
  box-sizing: border-box;
}

.menu_row {
}

/deep/ .active_dot-class {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  margin-right: 3px;
}
/deep/ .active_dot_green-class {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background-color: green;
}

/deep/ .active_dot_red-class {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  background-color: red;
}

.menu_col {
  height: 60px;
  margin-bottom: 15px;
}

/deep/ .point-class {
  cursor: pointer;
}

.menu_title {
  width: 120px;
  height: 40px;
  position: absolute;
  top: 0px;
  line-height: 40px;
  font-size: 14px;
  font-family: 微软雅黑;
  font-weight: bold;
  color: white;
  border-top-left-radius: 3px;
  background: url('~assets/bg_menu.png') no-repeat;
  background-size: 100% 100%;
}
::v-deep .el-table .el-table__cell {
  background-color: transparent;
  color: white;
}

/*以下是合计调上的样式 */

::v-deep .el-table {
  display: flex;
  flex-direction: column;
}

/* order默认值为0，只需将表体order置为1即可移到最后，这样合计行就上移到表体上方 */
::v-deep .el-table__body-wrapper {
  order: 1;
}
::v-deep .el-table__fixed-body-wrapper {
  top: 96px !important;
}
::v-deep .el-table__fixed-footer-wrapper {
  z-index: 0;
}
</style>